<template>
	<view class="content">
		<view class="top">
			<view class="topItem" :class="[topIndex == index ? 'top_active' : '']" v-for="(item, index) in topList" :key="index"
			 @tap="topClick(index)">{{ item }}</view>
		</view>
		<view style="height: 80upx;"></view>
		<scroll-view scroll-y="true" class="msg-content" :scroll-into-view="scrollToView">
			<view class="head" id="label1">
				<view class="head_content">
					<view class="title">{{details.package_name}}</view>
					<view class="num">
						<view>完成时间：{{details.end_date}}</view>
						<view>章节数：{{details.package_num}}</view>
						<view>资源数：{{details.resource_num}}</view>
					</view>
					<view class="moneynum">
						<view class="numleft">已售{{details.sales_num}}份</view>
						<view class="numrigth">¥{{details.price}}</view>
					</view>
				</view>
			</view>
			<view class="label">{{details.package_type==1 ? '课包' : '学包'}}简介</view>
			<view class="intro">
				{{details.package_remark}}
			</view>
			<view class="label" id="label2">{{details.package_type==1 ? '课包' : '学包'}}章节</view>
			<view class="section">
				<view class="section_item" v-for="(item,index) in details.sections" :key="index">
					<view class="section_top">
						<view class="top_name">{{item.section_name}}</view>
						<view class="top_btn" @click="gotoDetail(item,index)" v-if="package_log_id">查看详情</view>
						<view class="top_btn" @click="gotoDetail(item,index)" v-else>查看资源</view>
					</view>
					<view class="section_bottom">
						<view>完成时间：{{item.update_time}}</view>
						<view>参考课时：{{item.study_time}}课时</view>
					</view>
				</view>
				<view class="load" @click="gotomore">
					查看更多
				</view>
			</view>
			<view class="label" id="label3">{{details.package_type==1 ? '课包' : '学包'}}评价</view>
			<view class="appraise" v-show="details.commend&&details.commend.length == 0">
				<view class="load">暂无评价哦~</view>
			</view>
			<view class="appraise" v-show="details.commend&&details.commend.length > 0">
				<view class="appraise_item" v-for="(item,index) in details.commend" :key="index" @click="detail(item.unid)">
					<view class="img">
						<!-- <image :src="item.usr_head"></image> -->
						<headimg :realSrc="item.usr_head"></headimg>
					</view>
					<view class="appraise_content">
						<view class="appraise_top">
							<view class="appraise_name">{{item.usr_name}}</view>
							<view class="appraise_time">{{item.update_time}}</view>
							<view class="xinxi">
								<uni-rate :size="16" :readonly="true" :value="item.level" v-if="item.level"></uni-rate>
							</view>
						</view>
						<view class="appraise_bottom" v-html="item.context"></view>
					</view>
				</view>
				<view class="load" @click="allEval()">全部评论</view>
			</view>
		</scroll-view>
		<pay-popuper ref="popuper" :realPay="details.price"></pay-popuper>
		<view class="bottom_btn" v-if="!section_id && isSee != 1">
			<view class="btn" @click="pay">立即购买</view>
		</view>
	</view>
</template>

<script>
	import headimg from '@/components/head_img.vue'
	import uniRate from '../../components/uni-rate/uni-rate.vue';
	import payPopuper from './components/pay-popuper'
	import utils from '@/common/util.js';
	export default {
		components: {
			uniRate,
			payPopuper,
			headimg
		},
		data() {
			return {
				topList: ['简介', '章节', '评价'],
				topIndex: 0,
				nums: 3,
				scrollToView: '',
				package_id: '',
				details: '',
				total_price: 0,
				evalCont: [], //评价列表
				section_id: '',	// 5ec3b2450219c
				isSee: '',
				package_log_id:''
			};
		},
		onLoad(e) {
			this.package_id = e.package_id;
			this.section_id = e.section_id
			this.isSee = e.isSee
			if (e.package_log_id) {
				this.package_log_id = e.package_log_id;
			}
			// 获取课包
			this.getPackage();
			// this.getEval();
			if(this.package_log_id || this.isSee != 1) {
				console.log("=-===");
				var webView = this.$mp.page.$getAppWebview();
				webView.setTitleNViewButtonStyle(0, {
					text: ' ',
					width: 0
				});
			}
		},
		onNavigationBarButtonTap() {
			uni.navigateTo({
				url:'userlist?package_id='+this.package_id
			})
		},
		methods: {
			// 查看章节详情
			gotoDetail(item,index) {
				//查看资源
				var url='./packageChapter?package_id='+this.package_id+ '&section_id=' + item.unid+'&package_type='+this.details.package_type;
				
				//查看学生练习记录
				if(this.package_log_id){
					url=url+'&package_log_id='+this.package_log_id
				}
				
				uni.navigateTo({
					url:url
				});
			},
			gotomore:function(){
				var url='sectionlist?package_id='+this.package_id+'&isSee='+this.isSee+'&package_type='+this.details.package_type+'&num='+this.details.sections.length;

				if(this.package_log_id){
					url=url+'&package_log_id='+this.package_log_id;
				}
				uni.navigateTo({
					url:url
				})
			},
			pay: function() {
				this.$refs.popuper.goPay(this.package_id);
			},
			/* 获取课包详情 */
			getPackage: function() {
				this.$papi.apiPost('moblie/package/info/' + this.package_id).then(res => {
					if (res.data.code == 200) {
						var data = res.data.data;
						data.end_date = data.end_date.substring(0,10);
						if(data.commend) {
							for(var i = 0; i < data.commend.length; i++) {
								data.commend[i].update_time = data.commend[i].update_time.substring(0, 10);
							}
						}
						this.details = data;
						this.setData();
					} else {
						uni.showToast({
							title: res.data.message,
							icon: 'none'
						});
					}
				});
			},
			/* 获取评价列表 */
			// getEval() {
			// 	this.$papi.apiPost('moblie/package/comment/infos', {
			// 		package_id: this.package_id
			// 	}).then(res => {
			// 		if (res.data.code == 200) {
			// 			var list = res.data.data.list;
			// 			for (var i = 0; i < list.length; i++) {
			// 				list[i].update_time = list[i].update_time.substring(0, 16);
			// 			}
			// 			this.evalCont = list;
			// 		} else {
			// 			uni.showToast({
			// 				title: res.data.message,
			// 				icon: 'none'
			// 			});
			// 		}
			// 	});
			// },
			/* 切换头部按钮 */
			topClick(index) {
				this.topIndex = index;
				this.scrollToView = 'label' + (index + 1)
			},
			/* 查看全部评价*/
			allEval() {
				uni.navigateTo({
					url: 'packageEvaluate?package_id=' + this.package_id
				})
			},
			/* 评价详情 */
			detail(id) {
				uni.navigateTo({
					url: '../tongbu/myRating?tid=' + id + '&type=2'
				})
			}
		}
	};
</script>

<style lang="scss">
	page{
		background: #FAFAFA;
	}
	.uni-rate-icon {
		margin-right: 8upx !important;
	}

	/* 顶部选项卡 */
	.top {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 80upx;
		line-height: 80upx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		background: rgba(255, 255, 255, 1);
		z-index: 9999;
	}

	.topItem {
		color: #333333;
		font-size: 34upx;
		width: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}

	.top_active {
		color: #FF9900;
	}

	.top_active:after {
		content: '';
		width: 80upx;
		height: 4upx;
		background: #FF9900;
		position: relative;
		top: 10upx;
	}

	.line1 {
		width: 96%;
		margin: auto;
		margin-top: 180upx;
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
	}

	.nav_item {
		width: 30%;
		margin: 40upx 1.5%;
		height: 180upx;
	}

	.msg-content {
		position: absolute;
		background: #FAFAFA;
		width: 100%;
		margin-bottom: 180upx;
	}

	.head {
		width: 100%;
		background-color: #ffffff;

		.head_content {
			width: 92%;
			margin: auto;

			.title {
				padding-top: 20upx;
				font-size: 34upx;
				color: #333333;
				font-weight: bold;
				line-height: 80upx;
			}

			.num {
				display: flex;
				justify-content: flex-start;
				margin-bottom: 20upx;

				view {
					color: #999999;
					font-size: 26upx;
					margin-right: 30upx;
				}
			}

			.moneynum {
				display: flex;
				justify-content: space-between;
				height: 100upx;
				align-items: center;
				border-top: 1upx solid #eeeeee;

				.numleft {
					color: #666666;
					font-size: 26upx;
				}

				.numrigth {
					color: #00ACFE;
					font-size: 38upx;
				}
			}
		}
	}

	.label {
		width: 92%;
		display: flex;
		align-items: center;
		line-height: 35upx;
		margin: 28upx auto;
		font-size: 34upx;
		color: #333333;
		font-weight: bold;
		border-left: 5upx solid #FF9900;
		padding-left: 15upx;
	}

	.intro {
		width: 88%;
		margin: auto;
		background: rgba(255, 255, 255, 1);
		padding: 25upx;
		font-size: 34upx;
		color: #333333;
	}

	.section {
		width: 92%;
		margin: auto;
		background: rgba(255, 255, 255, 1);
		border-radius: 20upx;

		.section_item {
			padding-top: 20upx;

			.section_top {
				width: 100%;
				display: flex;
				justify-content: space-between;
				margin: auto;
				height: 80upx;
				align-items: center;

				.top_name {
					font-size: 34upx;
					color: #333333;
					margin-left: 20upx;
				}

				.top_btn {
					background: #FF9900;
					border-radius: 25upx;
					color: #ffffff;
					height: 52upx;
					width: 160upx;
					text-align: center;
					line-height: 52upx;
					margin-right: 20upx;
				}
			}

			.section_bottom {
				width: 100%;
				height: 60upx;
				margin: auto;
				padding-bottom: 10upx;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				border-bottom: 1upx solid rgba(229, 229, 229, 1);

				view {
					margin-left: 25upx;
					color: #999999;
					font-size: 28upx;
				}
			}
		}

		.load {
			width: 100%;
			height: 70upx;
			text-align: center;
			line-height: 70upx;
			font-size: 26upx;
			color: #CCCCCC;
		}
	}

	.appraise {
		width: 92%;
		margin: auto;
		margin-bottom: 30upx;
		border-radius: 20upx;
		background-color: #FFFFFF;

		.appraise_item {
			display: flex;
			justify-content: flex-start;
			margin: auto;
			padding: 20upx 30upx;
			border-bottom: 1px solid rgba(229, 229, 229, 1);

			.img {
				width: 70upx;
				height: 70upx;
				border-radius: 50%;
				margin-right: 15upx;

				image {
					width: 100%;
					height: 100%;
					border-radius: 50%;
				}
			}

			.appraise_content {
				width: 90%;
				display: flex;
				flex-direction: column;

				.appraise_top {
					display: flex;
					justify-content: flex-start;

					.appraise_name {
						color: #666666;
						font-size: 28upx;
						margin-right: 20upx;
					}

					.appraise_time {
						color: #CCCCCC;
						font-size: 28upx;
						margin-right: 20upx;
					}

					.xinxi {
						width: 30%;
						display: flex;
						align-items: center;
					}
				}

				.appraise_bottom {
					width: 100%;
					font-size: 34upx;
					color: #333333;
				}
			}
		}

		.load {
			width: 100%;
			height: 80upx;
			text-align: center;
			line-height: 70upx;
			font-size: 26upx;
			color: #CCCCCC;
		}
	}

	.bottom_btn {
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 120upx;
		background-color: #FAFAFA;
		display: flex;
		justify-content: center;
		align-items: center;

		.btn {
			width: 92%;
			height: 80upx;
			text-align: center;
			line-height: 80upx;
			color: #FFFFFF;
			font-size: 34upx;
			background: #FF9900;
		}
	}
</style>
